<template>
  <div>
    <van-nav-bar title="账号注册" text-color="white" > 
          <template #left>
    <van-icon name="arrow-left" size="18" color="white" />
  </template>
    </van-nav-bar>

    <van-form @submit="onSubmit" validate-trigger=onSubmit>
  <van-field
    v-model="username"
    name="username"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' },{ pattern:/^\w{5,}$/, message: '请输入5位字符以上的用户名' }]"
  />
  <van-field
    v-model="password"
    type="password"
    name="password"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' },{ pattern:/^\w{6,}$/, message: '请输入6位字符以上的用户名' }]"
  />
  <div style="margin: 16px;">
    <van-button  block type="info" native-type="submit" color="#23d881" >注册</van-button>
  </div>
</van-form>

  <router-link to="/login" class="link">已有账号？去登入</router-link>
  </div>
</template>

<script>
import {register} from '@/api/user'
export default {
  name: 'Register',
    data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
  async  onSubmit(values) {
   
 const data= await register(values)
  if(data.data.description==='你输入的账号名重复') return this.$toast.fail(data.data.description)
   this.$toast.success('注册成功')
   this.$router.push('/login')
    },
  }
}
</script>

<style scoped lang="less">
.van-nav-bar {
  background-color: #23d881 !important;
}
// .van-nav-bar_{
// /deep/.van-nav-bar__title {
//   color: white 
// }
// }

.link{
  display: flex;
  justify-content: center;
  color: #069;
  font-size: 12px;
}
</style>
